<template>
  <div>
    <div class="table-default">
      <!-- 查询 -->
      <el-form ref="formRef" :model="queryForm" label-width="100px" :inline="true" style="margin-top: 0.5rem">
        <!-- <el-form-item label="生产车间 :">
          <el-input v-model="queryForm.fworkshopid_number" placeholder="查询生产车间" clearable />
        </el-form-item> -->
        <el-form-item label="组织名称 :">
          <el-select v-model="queryForm.fprdorgid_number" placeholder="查询组织名称" clearable>
            <el-option :label="item.label" :value="item.value" v-for="item in OrgList" :key="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchHandler">查询</el-button>
          <el-button @click="resetForm(formRef)">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 备货看板 -->
      <div class="table-container">
        <div class="backList-container">
          <el-table :data="backReportList" v-loading="backReportLoading" class="mt-3" style="width: 100%; height: 90%; font-size: 14px" border v-if="statusformatter">
            <el-table-column label="工单号" prop="fbillno" width="150" />
            <el-table-column label="生产订单" prop="fmobillno" width="140" />
            <el-table-column label="生产车间" prop="fworkshopid_name" width="110" />
            <el-table-column label="备货状态" prop="back_status" width="90">
              <template #default="scope">
                <el-tag class="ml-2" type="warning" v-if="scope.row.back_status == '0'">{{ statusformatter[Number(scope.row.back_status)] }}</el-tag>
                <el-tag class="ml-2" type="success" v-if="scope.row.back_status == '1'">{{ statusformatter[Number(scope.row.back_status)] }}</el-tag>
                <el-tag class="ml-2" type="danger" v-if="scope.row.back_status == '2'">{{ statusformatter[Number(scope.row.back_status)] }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="组织名称" prop="fprdorgid_name" width="90" />
            <el-table-column label="货主名称" prop="fowneridsety_name" width="90" />
            <el-table-column label="工艺流程" prop="flow_name" width="150" />
            <el-table-column label="产品编码" prop="fmaterialid" width="100" />
            <el-table-column label="产品名称" prop="fmaterialname" min-width="150" />
            <el-table-column label="产品规格" prop="fmaterialmodel" width="100" />
            <el-table-column label="产品型号" prop="fmodel" width="100" />
            <el-table-column label="产品单位" prop="funitid_name" width="85" />
            <el-table-column label="指派人" prop="user_name" width="90" />
            <el-table-column label="工单数量" prop="fqty" width="85">
              <template #default="scope">
                {{ Number(scope.row.fqty) }}
              </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="created_at" width="150" />
          </el-table>
          <div class="pager">
            <el-pagination layout="prev, pager, next" small :total="backReportPages.total" :current-page="backReportPages.page" @current-change="backReportchange" />
          </div>
          <div class="btn-box">
            <el-button type="primary" @click="goDetail('backReport')">查看全部</el-button>
          </div>
        </div>
        <div class="backReport-container">
          <div class="backReport-item backReport-left">
            <el-table :data="receivedList" v-loading="receivedLoading" class="mt-3" style="width: 100%; height: 90%; font-size: 14px" border>
              <el-table-column label="已领料工单号" prop="order.fbillno" width="145" />
              <el-table-column label="物料编码" prop="fmaterialid1" width="110" />
              <el-table-column label="物料名称" prop="fmaterialname1" width="120" />
              <el-table-column label="应发数量" prop="fmustqty" width="85">
                <template #default="scope">
                  {{ Number(scope.row.fmustqty) }}
                </template>
              </el-table-column>
              <el-table-column label="已领数量" prop="fpickedqty" width="85">
                <template #default="scope">
                  {{ Number(scope.row.fpickedqty) }}
                </template>
              </el-table-column>
              <el-table-column label="生产车间" prop="order.fworkshopid_name" width="120" />
            <el-table-column label="组织名称" prop="fownerid_name" width="110" />
              <el-table-column label="产品名称" prop="order.fmaterialname" min-width="150" />
            </el-table>
            <div class="pager">
              <el-pagination layout="prev, pager, next" small :total="receivedPages.total" :current-page="receivedPages.page" @current-change="receivedchange" />
            </div>
            <div class="btn-box">
              <el-button type="primary" @click="goDetail('received')">查看全部</el-button>
            </div>
          </div>
          <div class="backReport-item backReport-right">
            <el-table :data="notPickedList" v-loading="notPickedLoading" class="mt-3" style="width: 100%; height: 90%; font-size: 14px" border>
              <!-- <el-table-column label="领料状态" prop="back_status" width="85" /> -->
              <el-table-column label="未领完工单号" prop="order.fbillno" width="150" />
              <el-table-column label="物料编码" prop="fmaterialid1" width="120" />
              <el-table-column label="物料名称" prop="fmaterialname1" width="120" />
              <el-table-column label="应发数量" prop="fmustqty" width="85">
                <template #default="scope">
                  {{ Number(scope.row.fmustqty) }}
                </template>
              </el-table-column>
              <el-table-column label="已领数量" prop="fpickedqty" width="85">
                <template #default="scope">
                  {{ Number(scope.row.fpickedqty) }}
                </template>
              </el-table-column>
              <el-table-column label="生产车间" prop="order.fworkshopid_name" width="120" />
            <el-table-column label="组织名称" prop="fownerid_name" width="110" />
              <el-table-column label="产品名称" prop="order.fmaterialname" width="200" />
            </el-table>
            <div class="pager">
              <el-pagination layout="prev, pager, next" small :total="notPickedPages.total" :current-page="notPickedPages.page" @current-change="notPickedchange" />
            </div>
            <div class="btn-box">
              <el-button type="primary" @click="goDetail('notPicked')">查看全部</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script lang="ts" setup>
import { computed, onMounted, reactive, ref, watch } from 'vue'
import http from '/admin/support/http'
import { ElMessage } from 'element-plus'
import { View } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { fa } from 'element-plus/es/locale'
import type { FormInstance } from 'element-plus'

let router = useRouter()
const backReportList = ref([])
const receivedList = ref([])
const notPickedList = ref([])

const currentDate = new Date()
const year = currentDate.getFullYear()
const month = currentDate.getMonth() + 1
const day = currentDate.getDate()

const formattedDate = `${year}-${month}-${day}`
// const formattedDate = '2023-07-29'

console.log('当前日期', formattedDate)

let statusformatter = ref({})


const formRef = ref<FormInstance>()

let queryForm = reactive({
  fworkshopid_number: '',
  fprdorgid_number: '',
})



//  状态枚举
const getStatus = () => {
  http.get('/options/ProductionOrderBackStatus').then(r => {
    console.log('领料状态数据', r.data.data)
    if (r.data.code == 10000) {
      statusformatter = r.data.data.reduce((acc, item) => {
        acc[item.value] = item.label
        return acc
      }, {})
      console.log('转换状态', statusformatter)
    } else {
      ElMessage.error(r.data.message)
    }
  })
}
getStatus()

// 点击查看
const goDetail = val => {
  if (val == 'backReport') {
    console.log('全部工单')
    router.push(`/production/stockBoardDetail`)
  } else {
    let back_status = 0
    if (val == 'received') {
      console.log('已领工单')
      back_status = 1
    }
    if (val == 'notPicked') {
      console.log('未领完工单')
      back_status = 0
    }

    router.push(`/production/stockBoardDetail?back_status=${back_status}`)
  }
}

let backReportLoading = ref(false)
let receivedLoading = ref(false)
let notPickedLoading = ref(false)

// 分页定义
let backReportPages = reactive({
  total: 0,
  page: 1,
  limit: 10,
})
let receivedPages = reactive({
  total: 0,
  page: 1,
  limit: 8,
})
let notPickedPages = reactive({
  total: 0,
  page: 1,
  limit: 8,
})
// 全部切下一页
const backReportPagesNextPage = () => {
  // 检查是否到达最后一页
  if (Math.floor(backReportPages.total / backReportPages.limit) == 0) return
  console.log('触发切下一页')
  if (backReportPages.page >= Math.floor(backReportPages.total / backReportPages.limit)) {
    backReportPages.page = 1 // 回到第一页
  } else {
    backReportPages.page++ // 下一页
  }
  getBackReport()
}
// 已领料切下一页
const receivedPagesNextPage = () => {
  // 检查是否到达最后一页
  if (Math.floor(receivedPages.total / receivedPages.limit) == 0) return
  console.log('触发切下一页')
  if (receivedPages.page >= Math.floor(receivedPages.total / receivedPages.limit)) {
    receivedPages.page = 1 // 回到第一页
  } else {
    receivedPages.page++ // 下一页
  }
  getReceived()
}
// 未领料切下一页
const notPickedPagesNextPage = () => {
  // 检查是否到达最后一页
  if (Math.floor(notPickedPages.total / notPickedPages.limit) == 1) return
  console.log('触发切下一页')

  if (notPickedPages.page >= Math.floor(notPickedPages.total / notPickedPages.limit)) {
    notPickedPages.page = 1 // 回到第一页
  } else {
    notPickedPages.page++ // 下一页
  }
  getNotPicked()
}
const backReportTimer = setInterval(backReportPagesNextPage, 60 * 1000)
const receivedTimer = setInterval(receivedPagesNextPage, 60 * 1000)
const notPickedTimer = setInterval(notPickedPagesNextPage, 60 * 1000)

// 全部切页
const backReportchange = val => {
  console.log('触发已领料分页,页数val:', val)
  backReportPages.page = val
  getBackReport()
}
// 已领料切页
const receivedchange = val => {
  console.log('触发已领料分页,页数val:', val)
  receivedPages.page = val
  getReceived()
}
// 未领料切页
const notPickedchange = val => {
  console.log('触发未领料分页,页数val:', val)
  notPickedPages.page = val
  getNotPicked()
}

// 全部表头
const getBackReport = () => {
  // 全部状态
  let AllSend = {
    start_date: formattedDate,
    end_date: formattedDate,
    limit: backReportPages.limit,
    page: backReportPages.page,
    ...queryForm,
  }
  backReportLoading.value = true
  http
    .get('/production/back/list', AllSend)
    .then(r => {
      backReportLoading.value = false
      console.log('请求备货计划明细', r.data)
      if (r.data.code == 10000) {
        backReportList.value = r.data.data
        backReportPages.total = r.data.total
      } else {
        ElMessage.error(r.data.message)
      }
    })
    .catch(() => {
      backReportLoading.value = false
    })
}

//   已领料
const getReceived = () => {
  let readySend = {
    start_date: formattedDate,
    end_date: formattedDate,
    back_status: 1,
    limit: receivedPages.limit,
    page: receivedPages.page,
    ...queryForm,
  }
  receivedLoading.value = true
  http.get('/production/back/report', readySend).then(r => {
    console.log('请求已领料数据', r.data)
  receivedLoading.value = false
    if (r.data.code == 10000) {
      receivedList.value = r.data.data
      receivedPages.total = r.data.total
    } else {
      ElMessage.error(r.data.message)
    }
  }).catch(()=>{
  receivedLoading.value = false

  })
}

//   未领料
const getNotPicked = () => {
  let noSend = {
    start_date: formattedDate,
    end_date: formattedDate,
    back_status: 0,
    limit: notPickedPages.limit,
    page: notPickedPages.page,
    ...queryForm
  }
  notPickedLoading.value = true
  http.get('/production/back/report', noSend).then(r => {
    console.log('请求未领料数据', r.data)
  notPickedLoading.value = false
    if (r.data.code == 10000) {
      notPickedList.value = r.data.data
      notPickedPages.total = r.data.total
    } else {
      ElMessage.error(r.data.message)
    }
  }).catch(()=>{
  notPickedLoading.value = false

  })
}

let OrgList = ref([])
const statusHandler = () => {
  http.get('options/Org').then(r => {
    console.log('组织枚举', r.data.data)
    OrgList.value = r.data.data
    // TransferOrderStatusObj.value = TransferOrderStatusList.value.reduce((prev, item) => {
    //   prev[item.value] = item.label
    //   return prev
    // }, {})
  })
}

const searchHandler = () => {
  console.log('查询', queryForm)
  getBackReport()
  getNotPicked()
  getReceived()
}

const resetForm = (formEl: FormInstance | undefined) => {
  // if (!formEl) return
  // formEl.resetFields()
  // console.log(formEl);
  queryForm.fworkshopid_number = ""
  queryForm.fprdorgid_number = ""
  getBackReport()
  getNotPicked()
  getReceived()
  
}

onMounted(() => {
  getBackReport()
  getReceived()
  getNotPicked()
  statusHandler()
})
</script>

<style lang="css">
.el-table .el-table__header {
  height: 1rem;
}
.el-table .el-table__cell {
  padding: 3px 0;
}
.table-default {
  /* border: 1px solid #000; */
  width: 100%;
  height: 100%;
  padding: 5px !important;
  /* height: 100vh; */
  margin-top: 0 !important;
}
.table-container {
  width: 100%;
  height: 75vh;
  /* border: 1px solid green; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.backList-container {
  position: relative;
  padding: 0 3px;
  box-sizing: border-box;
  width: 100%;
  height: 49%;
  border-radius: 5px;
  border: 2px solid rgb(118, 204, 239);
  /* display: flex;
  flex-direction: column;
  justify-content: space-between; */
}
.backList-container:hover {
  box-shadow: 2px 3px 5px rgba(193, 229, 243, 0.615);
  /* transform: scale(1.01); */
  transition: all 0.5s;
}
.btn-box {
  z-index: 99;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}
.backReport-container {
  width: 100%;
  height: 49%;
  /* border: 1px solid pink; */
  display: flex;
  justify-content: space-around;
}
.backReport-item {
  position: relative;
  padding: 0 3px;
  box-sizing: border-box;
  width: 49%;
  height: 100%;
  border-radius: 5px;
  /* border: 2px solid pink; */
  /* display: flex;
  flex-direction: column;
  justify-content: space-between; */
}
.backReport-right {
  border: 2px solid orange;
}
.backReport-right:hover {
  box-shadow: 2px 3px 5px rgba(244, 219, 172, 0.533);
  transform: scale(1.01);
  transition: all 0.5s;
}
.backReport-left {
  border: 2px solid rgb(46, 183, 46);
}
.backReport-left:hover {
  box-shadow: 2px 3px 5px rgba(196, 255, 196, 0.53);
  transform: scale(1.01);
  transition: all 0.5s;
}
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: none;
}
</style>
  